<template>
  <div :class="{ hidden: !myselfShow }" id="bm">
    <div
      style="
        width: 750px;
        padding-bottom: 40px;
        margin: 0px auto;
        background: #ffffff;
        border-radius: 9px;
      "
    >
      <div class="top">
        <div style="display: flex; flex-direction: row">
          <h2>订单信息</h2>
          <span class="s1 el-icon-close" @click="onClose"></span>
        </div>
      </div>
      <div class="main" v-if="loadData !== null">
        <div class="container" v-if="loadData">
          <span class="title">基本信息</span>
          <div class="d1">
            <span>订单编号</span>
            <div class="d2">
              <span>{{ loadData.orderNo }}</span>
            </div>
          </div>
          <div class="d1">
            <span>订单生成时间</span>
            <div class="d2">
              <span>{{ loadData.createDate }}</span>
            </div>
          </div>
          <div class="d1">
            <span>账号</span>
            <div class="d2">
              <span>{{ loadData.account }}</span>
            </div>
          </div>
        </div>
        <template>
          <el-table border :data="loadData.pageInfo.list" style="width: 100%">
            <el-table-column
              align="center"
              prop="date"
              label="封面预览"
              width="180"
            >
              <template slot-scope="scope">
                <img :src="scope.row.resourceUrl" style="width: 40%" alt="" />
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="resourceName"
              label="资源名称"
              width="180"
            >
            </el-table-column>
            <el-table-column align="center" prop="purchaseNum" label="购买数量">
              <template slot-scope="scope">
                x{{ scope.row.purchaseNum }}
              </template> </el-table-column
            ><el-table-column
              align="center"
              prop="resourceUnitPrice"
              label="单个价格"
            >
              <template slot-scope="scope">
                ￥{{ scope.row.resourceUnitPrice }}
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- <div class="container"> -->
        <!--分页-->
        <!-- <div
            style="
              width: 100%;
              display: flex;
              flex-direction: row;
              justify-content: center;
              margin-top: 25px;
              padding-bottom: 5px;
            "
          >
            <div class="block">
              <el-pagination
                @current-change="getChange(page4)"
                :current-page.sync="page4"
                layout="prev,pager,next"
                :page-size="pageSize"
                :total="commonTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div> -->
        <div class="container">
          <hr />
          <div class="d1" v-if="loadData">
            <span style="font-weight: bolder">订单总额:</span>
            <div class="d12" style="width: 170px">
              <!-- <span
                style="
                  font-size: 14px;
                  color: #9b9b9b;
                  text-decoration: line-through;
                "
                >¥ {{ getPayTotal }}</span
              > -->
              <span style="float: right">¥ {{ totalAmount }}</span>
            </div>
          </div>
          <div class="d1" v-if="loadData">
            <span style="font-weight: bolder">应付总额:</span>
            <span style="color: red; font-size: 20px"
              >¥ {{ totalAmount }}</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mxr from "../../common/encryption";
import bus from "../../assets/eventBus";
import ajax from "../../common/ajax";
import api from "../../common/api";

let userId;

export default {
  // name: "Slot",
  props: [
    "loadData",
    "totalAmount",
    "resourceTotal",
    "showCommonText",
    "showThirdText",
    "showCustomText",
  ],
  data() {
    return {
      myselfShow: false,
      myIndex: 0,
      // myData:null,
      radio: "1",
      showCommon: false,
      showThird: false,
      showCustom: false,
    };
  },
  created() {
    userId = this.$route.query.userId;
  },
  mounted() {
    /**
     * 打开弹窗
     */
    let that = this;
    console.log(111)
    console.log(this.loadData)
    bus.$on("showClauseDetail", function (id, id2) {
      that.myselfShow = true;
    });
  },
  methods: {
    showMoreCustom() {
      this.showCustom = !this.showCustom;
    },
    showMoreThird() {
      this.showThird = !this.showThird;
    },
    showMoreCommon() {
      this.showCommon = !this.showCommon;
    },
    /**
     * 已购买资源显示原价，其他显示0
     */
    getPrice(i, t) {
      return i === 2 ? (Math.round(t * 100) / 100).toFixed(2) : "0.00";
    },

    /**
     * 资源原价
     */
    getMyPrice(m) {
      return (Math.round(m * 100) / 100).toFixed(2);
    },

    /**
     * 资源类型
     */
    getType(i) {
      if (parseInt(i) == 0) {
        return "通用";
      } else if (parseInt(i) == 1) {
        return "3D模型";
      } else if (parseInt(i) == 2) {
        return "3D模型";
      } else if (parseInt(i) == 3) {
        return "自定义模型";
      } else if (parseInt(i) == 4) {
        return "自定义模型";
      } else if (parseInt(i) == 5) {
        return "自定义模型";
      } else if (parseInt(i) == 6) {
        return "视频";
      } else if (parseInt(i) == 7) {
        return "图片";
      } else if (parseInt(i) == 8) {
        return "全景";
      } else if (parseInt(i) == 9) {
        return "通用";
      } else if (parseInt(i) == 10) {
        return "通用";
      } else if (parseInt(i) == 11) {
        return "2D动画";
      } else if (parseInt(i) == 12) {
        return "2D游戏";
      } else if (parseInt(i) == 13) {
        return "音频";
      } else if (parseInt(i) == 14) {
        return "PPT";
      }
    },

    /**
     * 资源状态
     */
    getStatus(type) {
      if (parseInt(type) == 0) {
        return "已购买";
      } else if (parseInt(type) == 1) {
        return "已授权";
      } else {
        return "未获得";
      }
    },

    /**
     * 关闭弹窗
     */
    onClose() {
      this.myselfShow = false;
    },
  },
};
</script>

<style scoped>
h2 {
  font-size: 30px;
  margin-left: 310px;
  color: white;
  letter-spacing: 3px;
}

.s1 {
  font-size: 26px;
  margin-left: 250px;
  color: white;
  margin-top: 5px;
}

.s1:hover {
  cursor: pointer;
}

.hidden {
  display: none;
}

#bm {
  /*position: absolute;*/
  /*top: 0;*/
  /*z-index: 999;*/
  /*border-radius: 10px;*/
  /*left: 15%;*/
  /*border: 1px solid #979797;*/
  /*background: #BCBCBC;*/
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  z-index: 999;
  overflow-y: auto;
}

.btn3 {
  width: 100px;
  height: 40px;
  border: none;
  border-radius: 3px;
  background: white;
  font-size: 14px;
  color: #f5a623;
  margin: 10px 10px;
}

.btn4 {
  width: 179px;
  height: 40px;
  background: #4a90e2;
  border: none;
  border-radius: 3px;
  color: white;
  font-size: 14px;
}

.btn3:hover {
  cursor: pointer;
}

.btn4:hover {
  cursor: pointer;
}

.top {
  height: 55px;
  background: #4381e6;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding-top: 25px;
}

::-webkit-scrollbar {
  width: 2px;
}
.title {
  font-size: 20px;
  font-weight: bolder;
  display: block;
}
.container {
  width: 600px;
  margin: 25px auto;
}
.d1,
.d3,
.d4 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 14px;
  margin-left: 10px;
}
.d2 {
  width: 330px;
  text-align: center;
}
.s4 {
  font-size: 16px;
  font-weight: bolder;
}
.s2,
.s3 {
  font-size: 16px;
  font-weight: bolder;
}

.d5 {
  width: 75px;
  text-align: center;
  margin-top: 10px;
  margin-left: 152px;
}
.d6,
.d32 {
  width: 69px;
  text-align: center;
  margin-top: 10px;
  margin-left: 51px;
}
.d32 {
  margin-left: 55px;
}
.d7 {
  width: 170px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.d8 {
  display: flex;
  flex-direction: row;
}
.d17 {
  width: 200px;
}
.d20,
.d21,
.d22 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.d21 {
  width: 200px;
  margin-left: 10px;
}
.d22 {
  width: 170px;
}
.s21,
.s22 {
  font-size: 14px;
}
.s22 {
  color: red;
}

.s4:hover {
  cursor: pointer;
}

.top-icon:hover {
  cursor: pointer;
}

.bottom-icon:hover {
  cursor: pointer;
}
</style>
